<template>
    <div class="box4">
        <div class="rt">
            <p class="rt-title">热门景区排行</p>
            <p class="rt-bg"></p>
        </div>
        <div class="rank_title">
            <span class="span1">排名</span>
            <span class="span2">景区</span>
            <span class="span3">预约数量</span>
        </div>
        <div class="rt-charts">
            <div class="rank_num">
                <div><span class="rank_num1">NO.1</span></div>
                <div><span class="rank_num2">NO.2</span></div>
                <div><span class="rank_num3">NO.3</span></div>
                <div><span class="rank_num4">NO.4</span></div>
                <div><span class="rank_num5">NO.5</span></div>
            </div>
            <div class="area">
                <div><span>北京天安门</span></div>
                <div><span>大唐不夜城</span></div>
                <div><span>布达拉宫</span></div>
                <div><span>稻城亚丁</span></div>
                <div><span>黄山</span></div>
            </div>
            <div class="picture" ref="charts"></div>
            <div class="people_num">
                <div><span>9.20w</span></div>
                <div><span>8.40w</span></div>
                <div><span>7.40w</span></div>
                <div><span>6.80w</span></div>
                <div><span>6.00w</span></div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
//引入echarts图表集成包
import * as echarts from 'echarts'
//引入水球图的包
import 'echarts-liquidfill'

//获取组件实例
let charts = ref()

const drawRank = () => {
    let mycharts = echarts.init(charts.value)
    mycharts.setOption({
        grid: {
            top: '10%',    // 上间距
            bottom: '10%', // 下间距
            height: '80%'  // 控制图表的总高度，间接影响条形图之间的距离
        },
        xAxis: {
            show: false,
            min: 0,
            max: 100
        },
        yAxis: {
            show: false,
            type: 'category',
        },
        series: [{
            type: 'bar',
            data: [
                { value: 60, itemStyle: { color: 'rgb(255, 0, 119)', borderRadius: 20, borderColor: 'white' } },
                { value: 68, itemStyle: { color: 'rgb(0, 255, 72)', borderRadius: 20, borderColor: 'white' } },
                { value: 74, itemStyle: { color: 'rgb(0, 153, 255)', borderRadius: 20, borderColor: 'white' } },
                { value: 84, itemStyle: { color: 'rgb(255, 155, 0)', borderRadius: 20, borderColor: 'white' } },
                { value: 92, itemStyle: { color: 'rgb(255, 0, 0)', borderRadius: 20, borderColor: 'white' } }
            ],
            barWidth: 15,
            z: 3,
        },
        {
            type: 'bar',
            data: [100, 100, 100, 100, 100],
            barWidth: 15,
            barGap: '-100%',
            itemStyle: {
                color: 'rgb(17, 20, 78)',
                borderRadius: 20,
                borderColor: 'white'
            }
        }]
    })
}

onMounted(() => {
    drawRank()
})
</script>

<style scoped lang="scss">
.box4 {
    height: 100%;
    background: url(../../images/dataScreen-main-lt.png) no-repeat;
    background-size: 100% auto;
    margin-top: 15px;

    .rt {
        height: 53px;

        .rt-title {
            color: white;
            font-size: 20px;
            margin-left: 20px;
        }

        .rt-bg {
            width: 68px;
            height: 7px;
            background: url(../../images/dataScreen-title.png) no-repeat;
            background-size: cover;
            margin: 10px 0 0 20px;
        }
    }

    .rank_title {
        height: 36px;
        line-height: 36px;
        margin: 0 10px 0 10px;
        background: url(../../images/rankingChart-bg.png) no-repeat;
        background-size: cover;
        display: flex;
        font-size: 20px;
        color: white;

        .span1 {
            width: 40px;
            height: 36px;
            margin: 0 10px 0 10px;
            display: flex;
            justify-content: center;
        }

        .span2 {
            width: 100px;
            height: 36px;
            margin: 0 10px 0 10px;
            display: flex;
            justify-content: center;
        }

        .span3 {
            width: 200px;
            height: 36px;
            margin: 0 10px 0 10px;
            display: flex;
            justify-content: center;
        }
    }

    .rt-charts {
        box-sizing: border-box;
        width: 427px;
        height: 254px;
        display: flex;
        margin: 0 10px 0 10px;

        .rank_num {
            width: 12%;
            display: flex;
            flex-direction: column;
            text-align: center;
            color: white;
            margin: 8.5% 10px 8.5% 10px;
            justify-content: space-between;

            div {
                height: 20px;
            }

            .rank_num1 {
                height: 20px;
                background-color: rgb(255, 0, 0);
                border-radius: 5px;
            }

            .rank_num2 {
                height: 20px;
                background-color: rgb(255, 115, 0);
                border-radius: 5px;
            }

            .rank_num3 {
                height: 20px;
                background-color: rgb(0, 153, 255);
                border-radius: 5px;
            }

            .rank_num4 {
                height: 20px;
                background-color: rgb(0, 255, 72);
                border-radius: 5px;
            }

            .rank_num5 {
                height: 20px;
                background-color: rgb(255, 0, 119);
                border-radius: 5px;
            }
        }

        .area {
            width: 24%;
            display: flex;
            flex-direction: column;
            text-align: center;
            color: white;
            margin: 8.5% 10px 8.5% 10px;
            justify-content: space-between;
        }

        .picture {
            width: 50%;
            height: 100%;
        }

        .people_num {
            width: 10%;
            display: flex;
            flex-direction: column;
            text-align: center;
            color: white;
            margin: 8.5% 10px 8.5% 10px;
            justify-content: space-between;
        }
    }
}
</style>